<script setup lang="ts">
import { listLogistics } from '@/api/logistics/provider';
import { onMounted } from 'vue';
import { useVModel } from '@vueuse/core';
const props = defineProps<{
  modelValue?: string | number;
  name?: string;
}>();
const emit = defineEmits(['update:modelValue', 'update:name']);
const value = useVModel(props, 'modelValue', emit);
const name = useVModel(props, 'name', emit);

const list = ref([]);
const init = async (paraps?: any) => {
  const _list = await listLogistics(paraps);
  list.value = _list.data;
};

onMounted(async () => {
  await init({});
});

const v = computed({
  get() {
    let _list = list.value.filter((x) => x.logisticsId === value.value);
    if (_list.length > 0) return _list[0].logisticsId;
    return undefined;
  },
  set(v) {
    let _list = list.value.filter((x) => x.logisticsId === v);
    if (_list.length > 0) {
      value.value = _list[0].logisticsId;
      name.value = _list[0].companyName;
    }
  }
});
</script>

<template>
  <el-select v-model="v" v-bind="$attrs" placeholder="请选择供应商" :multiple="false">
    <el-option v-for="item in list" :key="item.logisticsId" :label="item.companyName" :value="item.logisticsId"> </el-option>
  </el-select>
</template>

<style scoped lang="scss"></style>
